<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model指令双向绑定</title>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 数据双向绑定，表单控件在实际开发中非常常见，真实开发主要就是用户信息提交，大量表单 -->
    <!-- vue中使用v-model指令来实现表单元素与数据之间的双向绑定 -->
    <!-- 双向绑定，当你input内容发生改变的时候，后台数据也同时改变 -->
    <input type="text" v-model="msg"><p>{{msg}}</p>

    <!-- v-model 它的本质就是v-bind 和v-on的语法糖 -->
    <!-- v-on：当我们输入框输入内容，因为input绑定了message，所以会实时的把输入内容传递到message中 -->
    <!-- v-bind：当我们message发生改变的时候，数据会绑定到value属性 -->
    
    <!-- 插值语法： 当我们message发生改变的时候 使用了胡子语法，message内容会插入到DOM元素-->
    <input type="text"  v-bind:value="message"  v-on:input="valueChange($event)"><p>{{message}}</p>

    <!-- textarea 多行文本 效果相同 -->
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world',
        message:"shane"
      },
      methods: {
        valueChange(e){
            // console.log(e.target.value);
            this.message = e.target.value
        }
      },
    })
  </script>
</body>
</html>